<template>
  <div class="cate">
    <div class="cate-top">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          shape="round"
        >
          <template #left>
            <van-icon name="arrow-left" size=".6rem" @click="$router.back()" />
          </template>
          <template #action>
            <van-icon name="ellipsis" size=".6rem" />
          </template>
        </van-search>
      </form>
    </div>
    <div class="cate-left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.cate_zh"
          v-for="item in catelist"
          :key="item._id"
        />
      </van-sidebar>
    </div>

    <div class="cate-right">
      <van-grid :column-num="3" :border="false">
        <van-grid-item
          v-for="item in cache[this.activeKey]"
          :key="item._id"
          :icon="item.img"
          :text="item.name"
        />
      </van-grid>
    </div>

    <TabBar></TabBar>
  </div>
</template>

<script>
import { TabBar } from "@/components";
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      activeKey: 0,
      value: "",
      catelist: [],
      catelistgood: [],
    };
  },
  components: {
    TabBar,
  },
  async created() {
    const res = await this.$api.fetchCateList();
    this.catelist = res.list;
    this.getGoodslist(this.payload);
  },
  watch: {
    activeKey() {
      if (!this.cache[this.activeKey]) this.getGoodslist(this.payload);
    },
  },
  computed: {
    ...mapState("good", ["cache"]),
    payload() {
      const idx = this.activeKey;
      return { idx, cate: this.catelist[idx].cate };
    },
  },
  methods: {
    ...mapActions("good", ["getGoodslist"]),
    ...mapMutations("good", ["cleanCache"]),
  },
  beforeDestroy() {
    this.cleanCache();
  },
};
</script>

<style lang="scss" scoped>
.cate-left::-webkit-scrollbar {
  display: none;
}
.cate {
  position: relative;
  .cate-left {
    position: absolute;
    height: 20rem;
    left: 0;
    top: 1.44rem;
    width: 2.266667rem;
    overflow-y: auto;
  }
  .cate-right {
    position: absolute;
    right: 0;
    width: 7.333333rem;
    h4 {
      font-size: 0.373333rem;
    }
  }
}
</style>